<template>
	<view>
		<view class="menus" @tap="channel()">
			<img :src="avatar || '../../static/image/bg_img.png'" alt="">
			<view>
				<view class="bigs">{{nickname}}</view>
				<view class="grays grays1">{{bio}}</view>
			</view>
			<img src="../../static/image/forword.png" alt="">
		</view>
		<view class="list">
			<view>备注：</view>
			<input type="text" v-model="note"/>
		</view>
		<view class="list">
			<view>描述：</view>
			<input type="text" v-model="content"/>
		</view>
		<view class="btns">
			<view class="btnsa" v-if="is_friend == 2" @click="apply">加好友</view>
			<view class="btnsa" v-else-if='is_friend == 1' @click="xiaoxi">发送消息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname:'',
				avatar:'',
				bio:'',
				id:'',
				phone:'',
				is_friend: '', //1 是好友 2 不是好友
				note:'',
				content:'',
				source:'',
				uid: null
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		async onLoad(options) {
			this.phone = options.phone;
			if(options.uid){
				this.uid = options.uid
			}
			if(this.uid){
				this.initDats()
			}else{
				this.initDat();
			}
			
		},
		methods: {
			//初始数据
			initDat(){
				this.$common.requests('/api/friend_add/search',{phone:this.phone}).then(res => {
					if(res.data.code == 1){
						this.nickname = res.data.data.nickname;
						this.id = res.data.data.id;
						this.source = res.data.data.source;
						if(res.data.data.avatar != ''){
							this.avatar = this.$common.baseUrl + res.data.data.avatar;
						}
						if(res.data.msg == '已添加'){
							this.is_friend = 1;
						}else{
							this.is_friend = 2;
						}
						
					}
				})
			},
			initDats(){
				this.$common.requests('/api/friend/is_friend',{uid: this.uid}).then(res => {
					if(res.data.code == 1){
						this.nickname = res.data.data.userinfo.nickname;
						this.id = res.data.data.userinfo.id;
						this.source = 4;
						this.is_friend = res.data.data.is_friendok;
						if(res.data.data.userinfo.avatar != ''){ 
							this.avatar = this.$common.baseUrl + res.data.data.userinfo.avatar;
						}
					}
				})
			},
			xiaoxi(){
				uni.navigateTo({
					url:"../HM-chat/HM-chat?friend_id="+this.id+'&nickname=' + this.nickname
				})
			},
			//申请
			apply(){
				var obj = {
					friend_id : this.id,
					phone : this.phone,
					note : this.note,
					content : this.content,
					source: this.source
				}
				this.$common.requests('/api/Friend_add/add', obj).then(res => {
					this.$api.msg(res.data.msg);
				})
			}
		}
	}
</script>

<style>
.menus{
	width: 92%;
	margin: 0 auto;
	border-bottom: solid 2upx #EEEEEE;
	padding: 20upx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.menus>img:nth-child(1){
	width: 90upx;
	height: 90upx;
	border-radius: 10upx;
}
.menus>view:nth-child(2){
	width: 75%;
}
.menus>img:nth-child(3){
	width: 30upx;
	height: 30upx;
}
.bigs{
	font-size: 32upx;
}
.grays{
	color: #B6B5B5;
	font-size: 26upx;
}
.grays1{
	padding-top: 15upx;
}
.btns{
	position: fixed;
	bottom: 20%;
	width: 90%;
	left: 5%;
	display: flex;
	justify-content: space-between;
}
.btnsa{
	letter-spacing: 5upx;
	width: 100%;
	text-align: center;
	padding: 20upx 0;
	border-radius: 10upx;
	color: #FFFFFF;
	font-size: 30upx;
	background: #4C68FF;
}
.shenqing{
	color: gray;
	font-size: 35upx;
	position: fixed;
	bottom: 20%;
	width: 100%;
	text-align: center;
}
.list{
	margin:10upx 30upx;
	padding: 30upx 0;
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.list view{
	width: 25%;
}
.list input{
	width: 75%;
}
</style>
